import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'Message';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

    renderIcon() {
        let icon = this.store.type === 'success' ? 'prompt_correct' : this.store.type === 'error'
            ? 'prompt_error' : 'prompt_caveat';
        return (
            <ReIcon icon={icon} className={this.store.type === 'success' ? 'icon success'
                : this.store.type === 'error' ? 'icon error' : 'icon warning'}/>
        );
    }

    renderWrapper() {
        return (
            <div className={this.store.visible ? 'messgae-wrapper fade-in' : 'message-wrapper fade-out'}
                 onClick={(e) => this.store.visible = false}>
                {this.renderIcon()}
                <span className="message-text">{this.store.text}</span>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-message-root">
                {this.renderWrapper()}
            </div>
        );
    }
}